<?php
	echo $template['partials']['clientForm'];
	echo "apresentar aqui informacao sobre a oferta com o ID: ".$offerId;
?>

<div id="noClientSelected" title="Alerta" class="dialog">nenhum cliente selecionado</div>

<div id="genericAlert" title="Alerta" class="dialog"> ... </div>

<p>se o cliente nao existe ... <button id="create-client-button">Criar Cliente</button>	</p>

<p>
	<!--  <button id="tmpButton">temp action</button>-->
</p>

<p>escolha os clientes para esta reserva (para escolher extras individuais para cada um dos clientes tem de fazer uma reserva individual)</p>




<table id="clientTable" class="display dataTable">
	<thead>
		<tr>
			<th width="4%">id</th>
			<th width="20%">Nome</th>
			<th>Morada</th>
			<th>eMail</th>
			<th width="12%">Telefone</th>
			<th width="15%">birthday</th>
		</tr>
	</thead>
	<tbody>
		<td colspan="5" class="dataTables_empty">Loading data from server</td>	
	</tbody>
</table>

<button id="reservationButton">Reservar</button>


<script>
$(document).ready(function() {

	// data is retrieved from this location:
	var serverRequest = window.ajaxUrl + '/readClientAction';

	// the id of the offer to be reserved
	var offerId = <?php echo $offerId;?>
	
	// object with datatable options 
	var tableProperties = {
		'sAjaxSource': 		serverRequest,	
		'sServerMethod':	'POST',
		'sAjaxDataProp': 	'data',
		'fnServerParams': 	function (aoData) {
				aoData.push( {'var1':'value1','var2':'value2'});
		},
		"aoColumns": [
			{"mDataProp":"id"},
			{"mDataProp":"name"},
			{"mDataProp":"address"},
			{"mDataProp":"email"},
			{"mDataProp":"phone"},
			{"mDataProp":"birthday"}
			
		],
		'bJQueryUI':		true,	// enable jqueryUI Themes
		'bPaginate':		true,
		'bSort':			true,
		'bInfo':			true,
		'bAutoWidth':		true,
		'bProcessing': 		true,
		'bServerSide': 		false,	// use server side processing
		'oLanguage': {
			'sInfo':		'registos _START_ até ao _END_ de _TOTAL_',
			'sZeroRecords': 'Não existem registos',
			'sSearch':		'Procurar',
			'sLengthMenu':	'Mostrar <select>' +
				'<option value="10">10</option>'+
		        '<option value="20">20</option>'+
		        '<option value="30">30</option>'+
		        '<option value="40">40</option>'+
		        '<option value="50">50</option>'+
		        '<option value="-1">Todos</option>'+
		        '</select> registos'
		}	
	};
	
	//set datatable options
	clientTable = $('#clientTable').dataTable(tableProperties);
	
	// toggle 'row_selected' class
	$('#clientTable tbody tr').live('click', function() {
		if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected'); 
        }
        else {
            clientTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
	});

	$('#reservationButton').on('click', function() {

		// get the value of the first cell from the selected row
		clientId = $('.row_selected td:first-child').text();	

		// if no row selected, id is an empty string	
		if (clientId) {
			
			// store reservation in the server
			saveReservation(clientId, offerId);
		}
		else { // show  an error msg if there is no client selected
			$('#noClientSelected').dialog({
				autoOpen:	true,
				show:		'fade',
				hide:		'fade',
				modal:		true,
				overlay: {
					//opacity: 0.7,
					background: "black"
				},
				buttons: {
					'ok': function() {
						$(this).dialog('close');
					}
				}
			});
		}
	});
});



function saveReservation(cliendId,offerId) {
	
	$.ajax({
		url:		window.ajaxUrl + '/createReservationAction',
		type:		'POST',		// type of request to make
		async:		true,		// asynchronous/synchronous request
		dataType:	"json",		// type of data returned from server
		
		// data to send
		data:					
		{
			client_id: 		clientId,	
			offer_id: 		offerId	
		},

		// request was successful ... 'data' is received from server
		success: 	function(data, textStatus, jqXHR) {
			if(data) {
				var alertDialog = $('#genericAlert');
				alertDialog.html(data.msg);
				alertDialog.dialog({
					width:		350,
					height:		150,
					show: 		'fade',
					hide: 		'fade',
					buttons: {
						"Ok": 		
						function() {
							$(this).dialog("close");
						}
					}
				});
				//alert(data.msg);
				console.log(data.msg);
			}
		},

		// something went wrong ...
		error:		function(jqXHR, textStatus, errorThrown) {	
			
		},
		
		// code to run regardless of success or failure
		complete: function(xhr, status) {
			
		}
	});
}

function tmp(a,b) {
	<?php 
		//$this->firephp->log($offers);
		//$this->firephp->log($offerId);
		//$this->firephp->log($userId);
	?>
	//console.log('tmp function');
}

</script>

